<template>
  <div>
    <!--  页面头部  -->
    <el-container>
      <el-header>
        <el-page-header @back="goBack" content="委托详情">
        </el-page-header>
      </el-header>
    </el-container>

    <template>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="entrustTime"
            label="委托时间"
            width="180">
        </el-table-column>
        <el-table-column
            prop="entrustId"
            label="委托编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="institution.institutionName"
            label="委托机构"
            width="180">
        </el-table-column>
        <el-table-column
            prop="stockId"
            label="股票编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="money"
            label="本次委托价格"
            width="180">
        </el-table-column>
        <el-table-column
            prop="deal"
            label="买卖方向"
            width="180">
        </el-table-column>
        <el-table-column
            prop="money"
            label="本次委托金额"
            width="180">
        </el-table-column>

        <el-table-column
            prop="status"
            label="委托状态"
            width="180">
        </el-table-column>
        <el-table-column
        label="操作">
          <template v-slot="scope">
            <el-button
            type="primary"
            size="mini"
            @click="delById(scope.row)">
              撤单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
<!--分页组件-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="queryForm.pageSize"
          :current-page="queryForm.pageNum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      tableData: [],
      queryForm: {
        pageNum: 1,
        pageSize: 5,
      },
      total: 0,
    }
  },
  methods: {
    getList() {
      this.axios.get("http://localhost:8005/entrust/list", {params: this.queryForm}).then(r => {
        this.tableData = r.data.data.list;
        this.total = r.data.data.total;
      });
    },
    //改变每页显示的条数触发事件
    handleSizeChange(size) {
      this.queryForm.pageSize = size;
      this.queryForm.pageNum = 1;
      this.getList();
    },
    //改变当前页触发事件
    handleCurrentChange(page) {
      this.queryForm.pageNum = page;
      this.getList();
    },
    delById(row){
      this.axios.delete("http://localhost:8005/entrust/delete/"+ row.entrustId).then(r => {
        this.$message.success("撤单成功");
        this.getList();
      });
    }
  },
  created() {
    this.getList();
  }
}
</script>

<style scoped>

</style>